Cascading Style Sheets Tutorial

For this tutorial, we'll produce the same Archaeology Tours page layout as the HTML tags tutorial, but the formatting will be controlled by a <STYLE> block that we'll create in the Style Editor and insert at the top of the document.

Cascading Style Sheets can be quite complex and there are a number of browser compatibility issues involved with their use. This tutorial covers the basics and is intended as an introduction to style sheet terminology and methodology and will give you some experience working in the Style Editor.

You might want to acquaint yourself with HomeSite's Style Editor before beginning this tutorial. It is described in Formatting Pages with Cascading Style Sheets.

Style syntax

The basic coding requirements for styles are:

Note The Style Editor automatically formats the style code correctly, but if you edit styles manually, make sure you follow these syntax guidelines. The Style Editor's color-coding feature makes it easy to identify the various style elements.

Replacing tag-based formatting with styles

To reproduce the look of the Archaeology Tours page, we will substitute style properties for tag attributes. Not all the tags in our page need to be changed and we will indicate those as we go.

Styles have great flexibility and in some cases they can be applied to a page element without requiring any changes to the tag code.

To convert the formatting to styles, we will follow this general procedure:

  1. Choose a selector in the Style Editor that is equivalent to a tag.
  2. Add properties comparable to tag attributes.